<template>
	<view class="box">
		<!-- 通知说明 -->
		<view class="top">
			<view class="top-bg">
				<image :src="serveUrl+'https://jw.xzsw2021.com/static/big/tu_96@2x.png'" mode=""></image>
			</view>
			<view class="top-c">
				<!-- 通知轮播 -->
				<view class="top-notice f-w">
					<image src="https://jw.xzsw2021.com/static/user/con_184@2x.png" mode="widthFix"></image>

					<!-- 纵向轮播图 -->
					<view class="text hide-line">
						<swiper class="swiper" vertical :autoplay="true">
							<swiper-item v-for="(item,index) in discountAdvertisement" :key="item.id">
								<view class="swiper-item hide-line">
									<text>{{item.user.nickname}}</text>
									<text>用{{item.user.UserGrade.grade_name||'Plus会员'}}已省</text>
									<text class="red">{{item.order_total_vip_price}}元</text>
								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
				<!--  -->
				<view class="top-t1 f-w f34">
					<view class="top-tl-img f-w">
						<image src="https://jw.xzsw2021.com/static/user/con_185@2x.png" mode=""></image>
					</view>
					<view v-if="chooseitem.term == 30 || chooseitem.term ==31">
						{{chooseitem.quota}}元开通{{grade.grade_name}}月卡</view>
					<view v-else-if="chooseitem.term >= 365">{{chooseitem.quota}}元开通{{grade.grade_name}}年卡</view>
					<view v-else>{{chooseitem.quota}}元开通{{grade.grade_name}}{{chooseitem.term}}天</view>
				</view>
				<view class="top-t2 f-w f48">
					<view>每月预计可省</view>
					<view class="red">￥{{130 + (Number(grade.level) * 3)}}</view>
				</view>
			</view>
		</view>
		<!--  会员权益-->
		<view class="member">
			<view class="title bold f30">会员专享权益</view>
			<view class="card fw-bt" style="font-size: 28rpx;color: #333;">
				<text>{{grade.info}}</text>
				<!-- <view v-for="(item,index) of list" :key="index">
					<view class="m-img f-w">
						<image :src="item.img" mode=""></image>
					</view>
					<view class="f24 tr">{{item.name}}</view>
				</view> -->
			</view>
		</view>
		<!-- plus会员 -->
		<view class="times">
			<view class="title bold f30">{{arr1[active].grade_name}}</view>
			<view class="card f-w">
				<!-- <view :class="active===index?'tcolor':''" v-for="(item,index) of arr1" :key="index"
					@click="choosePlus(index)">
					<view class="t1 f30">{{item.select.term+'天'}}</view>
					<view class="t2"><text class="f26">￥</text>{{item.select.quota}}</view>
					<view class="t3 f24 c999">原价: ￥{{item.select.original}}</view>
				</view> -->
				<template v-for="(gradeData,key1) in gradeList">
					<view :class="active===(key2+''+key1)? 'tcolor':''" v-for="(item,key2) of gradeData.condition"
						:key="key2" v-if="item.function_name.function_name == 'payMember'"
						@click="choosePlus(item,key1,key2)">
						<view class="t1 f30">{{item.term+'天'}}</view>
						<view class="t2"><text class="f26">￥</text>{{item.quota}}</view>
						<view class="t3 f24 c999">原价: ￥{{item.original}}</view>
					</view>
				</template>
				<view class="aa"></view>
			</view>
			<!-- 使用积分兑换 -->
			<view class="duih fw-bt" @click="jfdh">
				<view class="f26">使用积分兑换</view>
				<view class="timg f-w">
					<image src="https://jw.xzsw2021.com/static/user/con_190@2x.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 免费PLUS菜 -->
		<view class="free" v-if="productAll.free.length > 0">
			<view class="title f30 bold">免费PLUS菜</view>
			<view class="desc f24 c999" v-if="productAll.free[0].welfare_date_type == 1">
				每月{{productAll.free.date}}一款，0元享
			</view>
			<view class="desc f24 c999" v-if="productAll.free[0].welfare_date_type == 2">
				每周星期{{productAll.free.date}}一款，0元享
			</view>
			<view class="desc f24 c999" v-if="productAll.free[0].welfare_date_type == 3">每天一款，天天0元享</view>
			<scroll-view scroll-x="true" class="scroll">

				<view class="demo" v-for="(item,index) of productAll.free" :key="index" @click="goDetail(item)">
					<!-- 图片 -->
					<view class="img f-w">
						<image :src="item.pData.image" mode=""></image>
					</view>
					<!-- 名字 -->
					<view class="name hide-line2 bold f24">{{item.pData.store_name}}</view>
					<!-- 价格 -->
					<!-- aa -->
					<view class="three fw-bt">
						<view class="three-left">
							<view class="f20 green">
								￥<text class="f26 bold">{{item.pData.attrValue[0].price}}</text>
								<image v-if="item.grade.pic" :src="item.grade.pic" mode=""></image>
								<image src="https://jw.xzsw2021.com/static/client/icon_121@2x.png" mode="" v-else>
								</image>
							</view>
							<view class="c999 f22" v-if="item.pData.attrValue[0].ot_price > 0 ">
								￥{{item.pData.attrValue[0].ot_price}}</view>
						</view>
						<view class="three-img f-w" @click.stop="addCart(item)">
							<image src="https://jw.xzsw2021.com/static/client/icon_85@2x.png" mode=""></image>
						</view>
					</view>
				</view>
				<!--  -->
			</scroll-view>
			<view class="desc2 f24 c999">限量供应，任意金额订单都可享</view>

		</view>
		<!-- 专享pLus菜 -->
		<view class="free">
			<view class="title f30 bold">专享PLUS菜</view>
			<view class="desc f24 c999">超值低价商品等你来享，仅限PLUS会员能购买</view>
			<view class="list">
				<view class="demo" v-for="(item,index) of productAll.plus" :key="index" @click="goDetail(item)">
					<!-- 图片 -->
					<view class="img f-w">
						<image :src="item.pData.image" mode=""></image>
					</view>
					<!-- 名字 -->
					<view class="name hide-line2 bold f24">{{item.pData.store_name}}</view>
					<!-- 价格 -->

					<!-- aa -->
					<view class="three fw-bt">
						<view class="three-left">
							<view class="f20 green">
								￥<text class="f26 bold">{{item.pData.attrValue[0].price}}</text>
								<image :src="item.grade.pic" mode="" v-if="item.grade.pic"></image>
								<image src="https://jw.xzsw2021.com/static/client/icon_121@2x.png" mode="" v-else>
								</image>
							</view>
							<view class="c999 f22" v-if="item.pData.attrValue[0].ot_price > 0">
								￥{{item.pData.attrValue[0].ot_price}}</view>
						</view>
						<view class="three-img f-w" @click.stop="addCart(item)">
							<image src="https://jw.xzsw2021.com/static/client/icon_85@2x.png" mode=""></image>
						</view>
					</view>
				</view>
				<!--  -->
			</view>
		</view>
		<!-- 会员福利日 -->
		<view class="free date">
			<view class="title f30 bold">会员福利日</view>
			<view class="desc f24 c999">每月推出，仅会员能享受</view>
			<view class="list">
				<view class="demo" v-for="(item,index) of productAll.day" :key="index" @click="goDetail(item)">
					<!-- 图片 -->
					<view class="img f-w">
						<image :src="item.pData.image" mode=""></image>
					</view>
					<!-- 名字 -->
					<view class="name hide-line2 bold f24">{{item.pData.store_name}}</view>
					<!-- 价格 -->

					<!-- aa -->
					<view class="three fw-bt">
						<view class="three-left">
							<view class="f20 green">
								￥<text class="f26 bold">{{item.pData.attrValue[0].price}}</text>
								<image :src="item.grade.pic" mode="" v-if="item.grade.pic"></image>
								<image src="https://jw.xzsw2021.com/static/client/icon_121@2x.png" mode="" v-else>
								</image>
							</view>
							<view class="c999 f22">￥{{item.pData.attrValue[0].ot_price}}</view>
						</view>
						<view class="three-img f-w" @click.stop="addCart(item)">
							<image src="https://jw.xzsw2021.com/static/client/icon_85@2x.png" mode=""></image>
						</view>
					</view>
				</view>
				<!--  -->
			</view>
		</view>
		<!-- 购买会员 -->
		<view class="bottom">
			<view class="btn" @click="pay">开通并支付 ￥{{chooseitem.quota}}</view>
			<view class="tr f22 c999">购买即代表同意<text class="xieyi" @click="goPlusXy">PLUS会员协议</text></view>
		</view>
	</view>
</template>

<script>
	import {
		getGradeProudctApi,
		getVipDiscountAdvertisementApi,
		getGrade
	} from '@/api/grade.js'
	import {
		addCartApi
	} from '@/api/cart.js'
	export default {
		data() {
			return {
				serveUrl: '', //
				active: '00', //
				arr1: [],
				gradeList: [], //会员列表
				arr2: [],
				NoticeList: [{
					id: 1,
					title: '张天天'
				}], //
				list: [{
					img: 'https://jw.xzsw2021.com/static/user/con_186@2x.png',
					name: '双倍积分'
				}], //
				chooseitem: {}, //被选中的会员任务
				grade: {}, //被选中的会员
				times_list: [{
					id: 1,
					name: '1个月',
					price: 6,
					old_price: 24,
				}, {
					id: 1,
					name: '1个月',
					price: 6,
					old_price: 24,
				}],
				productAll: {},
				discountAdvertisement: [] //广告
			}
		},
		computed: {
			price() {
				return 0;
				// return this.times_list[this.active].price || 0
			}
		},
		onLoad() {
			this.getlist()
			this.gradeProudct()
			this.vipDiscountAdvertisement()
		},
		methods: {
			vipDiscountAdvertisement() {
				getVipDiscountAdvertisementApi().then(res => {
					this.discountAdvertisement = res.data
				}).catch(err => {

				})
			},
			gradeProudct() {
				getGradeProudctApi().then(res => {
					console.log(res)
					this.productAll = res.data
				}).catch(err => {

				})
			},
			// getlist() {
			// 	let arr1 = []
			// 	this.$request('grade/list', {}, 'GET').then(res => {
			// 		res.data.forEach(item => {
			// 			item.condition.forEach(item2 => {
			// 				if (item2.function_name.function_name == 'payMember') {
			// 					item.select = item2
			// 					arr1.push(item)
			// 				}
			// 			})
			// 		})
			// 		this.arr1 = arr1
			// 		this.chooseitem = this.arr1[this.active]
			// 	})
			// },
			getlist() {
				let This = this
				let is = true
				getGrade().then(res => {
					this.gradeList = res.data
					this.gradeList.forEach((grade, key1) => {
						grade.condition.forEach(condition => {
							if (condition.function_name.function_name == 'payMember' && is) {
								This.chooseitem = condition
								This.grade = grade //展示第一个有购买的任务会员
								is = false
							}
						})
					})
				}).catch(err => {

				})
			},
			pay() {
				uni.showLoading({
					mask: true
				})
				this.$request('grade/create_pay_order', {
					unique: this.chooseitem.unique
				}).then(res => {
					if (res.status == 200) {
						uni.hideLoading()
						this.paying(res.data.config)
					}
				})

			},
			// 支付
			paying(e) {

				let that = this
				let orderInfo = {
					timeStamp: e.timestamp,
					nonceStr: e.nonceStr,
					package: e.package,
					signType: e.signType,
					paySign: e.paySign,
				}
				wx.requestPayment({
					...orderInfo,

					success: (res) => {
						uni.showToast({
							title: "支付成功",
							icon: "none"
						})
						setTimeout(function() {
							uni.navigateBack({})
						}, 1000)
					},
					fail(e) {

						wx.showToast({
							title: '支付失败',
							icon: 'none'
						})
					}
				})

			},
			// 获取会员
			// 选择会员
			choosePlus(item, key1, key2) {
				this.active = `${key2}${key1}`;
				this.chooseitem = item
				this.grade = this.gradeList[key1]
			},
			// 积分兑换
			jfdh() {
				console.log('积分兑换');
				uni.navigateTo({
					url: '/pages/user/plus/integral/integral?type=1'
				})
			},
			// plus会员协议
			goPlusXy() {
				uni.navigateTo({
					url: '/pages/user/plus/plus-xieyi/plus-xieyi'
				})
			},
			goDetail(item) {
				uni.navigateTo({
					url: '/pages/client/shop/shop-detail/shop-detail?id=' + item.pid
				})
			},
			// 领取
			getFree(id) {
				console.log('得到');
				this.$showToast('只有会员能购买，请购买会员')
			},
			// 加入购物车
			addCart(item) {
				let data = {
					product_attr_unique:item.pData.attrValue[0].unique,
					cart_num:1,
					is_new:0,
					product_id:item.pData.product_id,
					product_type: item.pData.product_type
				}
				addCartApi(data).then(res => {
					this.$showToast('加入成功')
				}).catch(err => {
					// this.$showToast()
				})

				// console.log(item)
				// console.log('加入购物车');
				
			},
		}
	}
</script>
<style>
	page {
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	.box {
		padding: 28rpx 0 225rpx;

		.red {
			color: #F83535;
		}

		.top {
			position: relative;
			width: 750rpx;
			height: 250rpx;
			box-sizing: border-box;

			.top-bg {
				position: absolute;
				left: 0;
				top: 0;
				width: 750rpx;
				height: 250rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.top-c {
				position: relative;
				z-index: 2;
			}

			.top-notice {
				height: 80rpx;
				padding: 26rpx;
				box-sizing: border-box;

				image {
					margin-right: 12rpx;
					width: 33rpx;
				}

				.text {
					flex: 1;
					font-size: 22rpx;
					letter-spacing: 2rpx;
					color: #fff;

					.swiper {
						margin-top: 0;
						height: 30rpx;
					}
				}
			}

			.top-t1 {
				margin: 0 0 8rpx 60rpx;
				color: #fff;

				.top-tl-img {
					margin-right: 10rpx;
					width: 37rpx;
					height: 28rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.top-t2 {
				margin: 0 0 0 60rpx;
				color: #FFDCBD;
			}
		}

		// 会员权益
		.title {
			padding: 26rpx 0;
		}

		.member {
			padding: 0 30rpx;

			.card {
				padding: 32rpx 18rpx 30rpx;
				background: #FFFFFF;
				border-radius: 10rpx;
			}

			.m-img {
				margin: 0 auto 14rpx;
				width: 70rpx;
				height: 57rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.times {
			padding: 0 30rpx;

			.card {
				padding: 30rpx;
				background-color: #fff;
				border-radius: 10rpx;
				overflow: hidden;
				overflow-x: auto;

				&>view {

					flex-shrink: 0;
					width: 240rpx;
					height: 260rpx;
					text-align: center;
					border-radius: 20rpx;
					border: 2rpx solid #EEEEEE;
					box-sizing: border-box;

					.t1 {
						margin-top: 48rpx;
						letter-spacing: 4rpx;
					}

					.t2 {
						font-size: 68rpx;
					}

					.t3 {
						text-decoration: line-through;
					}
				}

				&>view:not(:last-child) {
					margin-right: 30rpx;
				}

				&>view:nth-last-child(2) {
					margin-right: 0;
				}

				.aa {
					width: 30rpx;
					height: 260rpx;
					border: none;
				}

				.tcolor {
					border: 2rpx solid #fee093;
					background: linear-gradient(0deg, #F8DB90 0%, #FCEDC9 100%);
				}
			}
		}

		.duih {
			margin-top: 20rpx;
			padding: 30rpx;
			background-color: #fff;
			border-radius: 10rpx;

			.timg {
				width: 15rpx;
				height: 29rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		// plus免费
		.red {
			color: #F83535;
		}

		.green {
			color: #028A69;
		}

		.free {
			padding: 0 30rpx;

			.title {
				margin-top: 60rpx;
				padding: 10rpx 0;
			}

			.desc {
				// margin-top: 14rpx;
			}

			.desc2 {
				margin-top: 28rpx;
			}

			.scroll {
				width: 690rpx;
				white-space: nowrap;
			}

			.demo {
				display: inline-block;
				flex-shrink: 0;
				margin-top: 26rpx;
				margin-right: 10rpx;
				width: 220rpx;
				min-height: 380rpx;
				padding: 0 20rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				box-sizing: border-box;
				overflow: hidden;

				.img {
					margin: 20rpx auto;
					width: 160rpx;
					height: 160rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.name {
					margin-top: 18rpx;
					width: 180rpx;
					white-space: pre-wrap;
				}

				.price {
					margin-top: 5rpx;
				}

				.price2 {
					margin-left: 4rpx;
					text-decoration: line-through;
				}

				.lq {
					margin-top: 10rpx;
					width: 160rpx;
					height: 56rpx;
					line-height: 56rpx;
					text-align: center;
					color: #634512;
					font-size: 24rpx;
					background: linear-gradient(64deg, #FAE5B1, #F1CF7B);
					border-radius: 28rpx;
				}

				.three {
					margin-top: 40rpx;

					.three-left {
						image {
							width: 23rpx;
							height: 17rpx;
						}
					}

					.three-img {
						width: 48rpx;
						height: 48rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.c999 {
						text-decoration: line-through;
					}
				}
			}

			.list {
				margin-top: 6rpx;

				&>view {
					margin: 20rpx 0 0 0;
				}

				&>view:not(:nth-child(3n-2)) {
					margin-left: 15rpx;
				}
			}
		}

		.date {
			.demo {
				padding: 0 20rpx 10rpx;
			}

			.img {
				width: 180rpx !important;
				height: 180rpx !important;

				image {
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
				}

				border-radius: 20rpx;
				background-color: #F5F5F5;
			}
		}

		.bottom {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 750rpx;
			height: 185rpx;
			background: #FFFFFF;

			.btn {
				margin: 18rpx auto;
				width: 690rpx;
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				color: #fff;
				font-size: 32rpx;
				font-weight: bold;
				background: linear-gradient(64deg, #2BCCA5, #22B591);
				box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(20, 187, 146, 0.4);
				border-radius: 10rpx;
			}

			.xieyi {
				margin-left: 4rpx;
				text-decoration: underline;

				color: #109C7A;
			}
		}
	}
</style>
